<template>
    <div style="height: 120%;">
        <el-row type="flex" justify="center"
                :gutter="20" style="height: auto;">
                <el-col :span="5" :offset="2" >
                    <el-menu
                            default-active="totalSale"
                            class="el-menu-vertical-demo"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                    style="box-shadow: 0 4px 8px;height: 100%">
                        <el-menu-item index="totalSale">总销量统计</el-menu-item>
                        <el-submenu index="type">
                            <template slot="title">
                                <span>车型销量</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(typeLegend,index) in carSaleTrendLegends" :key=index :index="'carSaleTrend/'+typeLegend">
                                    <span v-text="typeLegend"></span>销量走势</el-menu-item>
                                <el-menu-item  index="suvAndMpvSales">车型总销量占比</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="national">
                            <template slot="title">
                                <span>汽车国系</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(nationalLegend,index) in nationalCarSaleLegends" :key=index :index="'nationalCarSales/'+nationalLegend">
                                    <span v-text="nationalLegend"></span>系列销量走势</el-menu-item>
                                <el-menu-item index="totalNationalSale">国系销量占比</el-menu-item>
                                <el-menu-item index="suvNationalSale">SUV国系销量对比</el-menu-item>
                                <el-menu-item index="mpvNationalSale">MPV国系销量对比</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="carSaleMonthTopTen">各月前十热门车辆排行榜</el-menu-item>
                        <el-menu-item index="brandSale"><span slot="title">品牌销量</span></el-menu-item>         </el-menu>
                </el-col>
                <el-col :span="14" style="height:auto;background-color:white">
                    <!--                        放置销售分析视图组件-->
                    <router-view></router-view>
                </el-col>


        </el-row>
    </div>
</template>

<script>
    let saleAnaly={
        data() {
            return {
                defaultViewName: 'totalSale',
                carSaleTrendLegends: [],
                nationalCarSaleLegends:[],
                year:''
// carSaleTrendSer
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({path:'/saleAnaly/'+key})
            },
        },


        created() {
            this.year = String(new Date().getFullYear());
            //carSaleTrend 车型销量走势
            //获取legend，根据今年数据生成动态按钮
            this.$http({
                url: this.$http.adornUrl('/get/carSaleTrend'),
                method: 'get',
                params: this.$http.adornParams({
                        'year': (this.year),
                    },
                ),
            }).then(form => {
                if (form.data.status == "0") {
                    let legendData = form.data['series'].map(e => e.name);
                    this.carSaleTrendLegends=legendData
                } else {
                    this.$message("数据有误，请等待管理员处理")
                }
            });

            //nationalCarSales 各国系销量走势
            this.$http({
                url: this.$http.adornUrl('/get/nationalCarSales'),
                method: 'get',
                params: this.$http.adornParams({
                        'year': (this.year),
                    },
                ),
            }).then(form => {
                if (form.data.status == "0") {
                    let legendData = form.data['series'].map(e => e.name);
                    this.nationalCarSaleLegends=legendData
                } else {
                    this.$message("数据有误，请等待管理员处理")
                }
            });
        },
    };
    export default saleAnaly
</script>

<style scoped>

</style>